<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>表结构比较</title>
  <style type="text/css">
  .leftbox{display:inline-block;margin-right:10px;}
  .rightbox{display:inline-block;position:fixed;width:800px;height:98%;border:1px solid black;}
  </style>
  <script type="text/javascript">
  function sqlhelp(button){
    var table_name = button.getAttribute('data-table-name');
    var column_name = button.getAttribute('data-column-name');
    var data_type = button.getAttribute('data-type');
    var data_type2 = button.getAttribute('data-type2');
    var sqlbox = document.getElementById('sqlbox');
    if (data_type != null && data_type2 == null) {
      var sqlstr = "ALTER TABLE \""+table_name+"\" ADD \""+column_name+"\" "+data_type+" NULL;";
      sqlbox.innerHTML = sqlstr;
      document.getElementById('copyButton').style.display="";
    } else if (data_type != null && data_type2 != null && data_type != data_type2) {
      var sqlstr = "ALTER TABLE \""+table_name+"\" RENAME COLUMN \""+column_name+"\" TO \""+column_name+"2\";";
      sqlstr += "<br /><br />";
      sqlstr += "ALTER TABLE \""+table_name+"\" ADD \""+column_name+"\" "+data_type+" NULL;";
      sqlstr += "<br /><br />";
      sqlstr += "UPDATE \""+table_name+"\" SET \""+column_name+"\" = \""+column_name+"2\";";
      sqlstr += "<br /><br />";
      sqlstr += "ALTER TABLE \""+table_name+"\" DROP COLUMN \""+column_name+"2\";";
      sqlbox.innerHTML = sqlstr;
      document.getElementById('copyButton').style.display="";
    } else {
      sqlbox.innerHTML = "";
      document.getElementById('copyButton').style.display="none";
    }
  }
  function query(){
    document.getElementById("myForm").submit();
  }
  function reloadData(){
    let myinput = document.createElement("input");
    myinput.name = "action";
    myinput.value = "reload";
    document.getElementById("myForm").appendChild(myinput);
    document.getElementById("myForm").submit();
    myinput.remove();
  }
  async function copyToClipboard(){
    let text = document.getElementById('sqlbox').innerHTML;
    text = text.replaceAll("<br>", "\n");
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text);
      console.info("复制成功");
    } else {
      let textArea = document.createElement("textarea");
      textArea.value = text;
      // 设置不可见
      textArea.style.position = "absolute";
      textArea.style.opacity = 0;
      textArea.style.left = "-999999px";
      textArea.style.top = "-999999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      new Promise((res, rej) => {
        document.execCommand('copy')?res():rej();
        textArea.remove();
        console.info("复制成功");
      })
    }
  }
  </script>
</head>
<body>
  <div class="leftbox">
    <form id="myForm">
      <select name="tablename" onChange="query()">
        <option value="">请选择</option>
        <optgroup th:each="group : ${tablenames}" th:attr="label=${group.key}">
        <option th:each="table : ${group.value}" 
          th:value="${table.name}" 
          th:selected="${tablename == table.name}"
          th:text="${table.name + table.error}">
        </option>
        </optgroup>
      </select>
      <button onClick="reloadData()">刷新</button>
    </form>
    <div th:text="'表名：' + ${tablename}"></div>
    <table border="1">
      <tr>
        <td colspan="2">测试</td>
        <td colspan="2">正式</td>
        <td>比较</td>
      </tr>
      <tr>
        <td>名称</td>
        <td>类型</td>
        <td>名称</td>
        <td>类型</td>
        <td>结果</td>
      </tr>
      <tr th:each="item : ${list}"
          th:data-table-name="${tablename}" 
          th:data-column-name="${item.COLUMN_NAME}" 
          th:data-type="${item.DATA_TYPE}"
          th:data-type2="${item.DATA_TYPE2}"
          th:onclick="sqlhelp(this)">
        <td th:text="${item.COLUMN_NAME}">ID</td>
        <td th:text="${item.DATA_TYPE}">Number</td>
        <td th:text="${item.COLUMN_NAME2}">ID</td>
        <td th:text="${item.DATA_TYPE2}">Number</td>
        <td th:text="${item.DATA_TYPE==item.DATA_TYPE2?'':'false'}">False</td>
      </tr>
    </table>
  </div>
  <div class="rightbox">
    <button id="copyButton" onclick="copyToClipboard()" style="top:10px;z-index:10;display:none;">复制</button>
    <div id="sqlbox"></div>
  </div>
</body>
</html>